$(function(){
    var tele='';
    $(".pro1-third").on("click",function(){
        // 首先判断手机号是否为空
        // $('.tijiao').click(function(){
        if($('.rig .text').val()===''){
            layer.msg('手机号不能为空',{
                icon:2,
                time:1500
            })
            return false;
        }
        // 当手机号不能空时，判断手机号格式是否正确
        var reg=/^1[3589]\d{9}$/;
        var tel=$('.rig .text').val();
        // 返回-1则说明不正确
        if(tel.search(reg)<0){
            layer.msg('手机号格式不正确',{
                icon:2,
                time:1500
            })
            return false;
        }
        tele=$('.rig .text').val();
        // 正确则进入第二步
        var ac=$('.wrap .ac');
        $('.wrap .ac').removeClass('ac');
        ac.next().addClass('ac');
        var active=$('.pro .active');
        console.log($('.pro .active').parent().next().next().children().first());
        $('.pro .active').parent().next().next().children().first().next().addClass('act');
        $('.pro .active').parent().next().next().children().first().addClass('active'); 
        active.removeClass('active');
        active.next().removeClass('act');
        
    })
    // 获取验证码
        code_draw();
        // 点击后刷新验证码
        $("#canvas").on('click', function() {
            code_draw();
        })

// 在画布上写验证码
        function code_draw() {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas"); 
            var context = canvas.getContext("2d"); 
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            //  变为数组
            var aCode = sCode.split(",");
            var aLength = aCode.length; 
            // 随机产生4位
            var value = [];
            for (var i = 0; i <= 3; i++) {
                // 在数组中任意取一位
                var j = Math.floor(Math.random() * aLength); 
                var deg = Math.random() * 30 * Math.PI / 180; 
                var txt = aCode[j]; 
                value[i] = txt.toLowerCase();
                var x = 10 + i * 20; 
                var y = 20 + Math.random() * 8; 
                context.font = "bold 23px 寰蒋闆呴粦";
                context.translate(x, y);
                context.rotate(deg);
                context.fillStyle = code_randomColor();
                context.fillText(txt, 0, 0);
                context.rotate(-deg);
                context.translate(-x, -y);
            }
            // 将验证码存到canvas的自创属性中
            value = value.join("");
            $('#canvas').attr('data-code', value)
        
            for (var i = 0; i <= 5; i++) {
                context.strokeStyle = code_randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            
            for (var i = 0; i <= 30; i++) {
                context.strokeStyle = code_randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }
        function code_randomColor() { 
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

    
    // 第二步提交 
    $('.pro2-third').on("click",function(){
        // 检查数据
        if($('[name="regName"]').val() === ''){
            layer.msg('用户名不能为空',{
                icon:2,
                time:1500
            })
            return false;
        }
        // 字母开头，其余2-9位
        var usernameReg = /^[a-zA-Z]\w{2,9}$/;
        if(!usernameReg.test($('[name="regName"]').val())){
            layer.msg('用户名不规范',{
                icon:2,
                time:1500
            })
            return false;
        }
        if($('[name="pwd"]').val() === ''){
            layer.msg('密码不能为空',{
                icon:2,
                time:1500
            })
            return false;
        }
        // 密码至少6位
        var passwordReg = /^.{6,12}$/;
        if(!passwordReg.test($('[name="pwd"]').val())){
            layer.msg('密码不规范',{
                icon:2,
                time:1500
            })
            return false;
        }
        if($('[name="pwd"]').val() !== $('[name="repwd"]').val()){
            layer.msg('两次密码输入不一致',{
                icon:2,
                time:1500
            })
            return false;
        }
        if($('[name="email"]').val() === ''){
            layer.msg('邮箱不能为空',{
                icon:2,
                time:1500
            })
            return false;
        }
        var emailReg = /(^[1-9]\d{4,10}@qq\.com$)|(^[a-zA-Z]\w{3,11}@(163\.com|126\.com|yeah\.net)$)/;
        if(!emailReg.test($('[name="email"]').val())){
            layer.msg('邮箱不规范',{
                icon:2,
                time:1500
            })
            return false;
        }
        if($('[name="yzm"]').val()===''){
            layer.msg("验证码不能为空",{
                icon:2,
                time:1500
            })
            return false;
        }
        // 获取输入的验证码
        var val = $('[name="yzm"]').val().toLowerCase();
        // 获取生成验证码值
        var num = $('#canvas').attr('data-code');
        // 验证码错误
        if (val != num) {
            layer.msg("验证码错误",
            {
                icon:2,
                time:1500
            })
            return false;
    
        }


        // 数据
        var dataj = {
            "tele" : tele,
            
            "username" : $('[name="regName"]').val(),
            
            "password" :$('[name="pwd"]').val() ,
            
            "email" : $('[name="email"]').val()
            
            }
            console.log(dataj);
            $(this).prop('disabled',true);
            var loadindex = layer.load(1,{
                shade:[0.1,"red"]
            })

        // 提交ajax请求到数据库中
        $.ajax({
            url:"../php/register.php",
            method:"post",
            dataType:"json",
            data:{'data':JSON.stringify(dataj)},
            success:res=>{
                //解构数据
                var {meta:{status,msg}}=res;
                // 接触提交按钮的禁用
                $(this).prop('disabled',false);
                // 关闭loading层
                layer.close(loadindex);
                // 如果status返回1，则说明该用户注册成功，将该用户存到Cookie中
                if(status==1){
                    setCookie('username',$('[name="username"]').val(),7200)
                }
                layer.msg(msg,{
                    icon:1,
                    time:1500,
                },function(){
                    // 跳转到第三步
                    var ac=$('.wrap .ac');
        $('.wrap .ac').removeClass('ac');
        ac.next().addClass('ac');
        var active=$('.pro .active');
        $('.pro .active').parent().next().next().children().first().next().addClass('act');
        $('.pro .active').parent().next().next().children().first().addClass('active'); 
        active.removeClass('active');
        active.next().removeClass('act');

                    // 注册成功后，如果不是从别的页面跳转到注册页面的，则跳转到首页，否则跳转会之前的界面
                    // 将在20秒后跳转
                    layer.msg(msg,{
                        icon:1,
                        time:3000,
                    },function(){
                        var url = localStorage.getItem('url')
                        if(url){
                            localStorage.removeItem('url')
                            location.href = url
                        }
                        else location.href = "index.html"
                    })
                })

            }
        })



    })
})